<template>
  <el-form
      ref="ruleFormRef"
      :label-position="labelPosition"
      label-width="auto"
      :model="user"
      style="max-width: 600px"
  >

    <el-form-item label="昵称" :label-position="labelPosition" prop="nc">
      <el-input v-model="user.nc" />
    </el-form-item>
    <el-form-item label="性别" :label-position="labelPosition" prop="sex">
      <el-input v-model="user.sex" />
    </el-form-item>
    <el-form-item label="所在地" :label-position="labelPosition" prop="ip">
      <el-input v-model="user.ip" />
    </el-form-item>
    <el-form-item label="电话号码" :label-position="labelPosition" prop="phone">
      <el-input v-model="user.phone" />

    </el-form-item>
    <el-form-item label="邮箱" :label-position="labelPosition" prop="email">
      <el-input v-model="user.email" />

    </el-form-item>
    <el-form-item label="用户头像" prop="url">
      <el-upload drag style="width:100%"
                 action="/api/file/myboke"
                 :on-success="handleFileUploadSuccess"
      >
        <el-icon class="el-icon--upload"><upload-filled/></el-icon>
        <div class="el-upload__text">将文档拖拽到此处，或 <em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">支持 jpg/png 格式， 大小不超过 5M</div>
        </template>
      </el-upload>
    </el-form-item>
    <el-form-item label="个人简介" :label-position="labelPosition" prop="drb">
      <el-input v-model="user.drb" />
    </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="submitForm">
      更新
    </el-button>
      <el-button @click="emits('closeDialog')">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import {ref,defineEmits,defineExpose} from 'vue'
import type { FormInstance, FormRules,FormItemProps, FormProps } from 'element-plus'

import axios from "axios";
import {ElMessage} from "element-plus";
const labelPosition = ref<FormProps['labelPosition']>('right')
const emits = defineEmits([
    "flushPage",
    "closeDialog"
])
const ruleFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const user = ref({
yhm: "",
phone: "",
email: "",
sex: "",
tx: "",
nc: "",
ip: "",
drb: "",
})
const handleUpdateUser = (obj) => {
user.value=obj;
}
const handleFileUploadSuccess = (fileName) => {
  if (fileName != null || fileName != '') {
    user.value.tx = fileName;
    ElMessage({type: 'success',message:'文件上传成功'})
  }else{
    ElMessage({type: 'error',message:'文件上传失败'})
  }
}
const submitForm=async ()=>{
  const {data} = await axios.put('/api/user',user.value)
  emits("flushPage");
  emits("closeDialog");
}
defineExpose( {
  handleUpdateUser,
})
</script>

<style scoped>

</style>